import React, { useState } from 'react';
import ImageViewer from './ImageViewer';

/**
 * ImageViewer 使用示例
 * 展示如何在任何组件中集成图片和视频浏览功能
 */
const ImageViewerExample: React.FC = () => {
  const [showImageViewer, setShowImageViewer] = useState(false);
  const [currentMedia, setCurrentMedia] = useState<{ url: string; type: 'image' | 'video' }>({ url: '', type: 'image' });

  // 示例媒体列表
  const sampleMedia = [
    { url: 'https://example.com/image1.jpg', type: 'image' as const },
    { url: 'https://example.com/video1.mp4', type: 'video' as const },
    { url: 'https://example.com/image2.jpg', type: 'image' as const },
  ];

  /**
   * 处理媒体点击
   */
  const handleMediaClick = (media: { url: string; type: 'image' | 'video' }) => {
    setCurrentMedia(media);
    setShowImageViewer(true);
  };

  /**
   * 关闭媒体预览
   */
  const handleCloseViewer = () => {
    setShowImageViewer(false);
    setCurrentMedia({ url: '', type: 'image' });
  };

  return (
    <div className="p-6">
      <h2 className="text-2xl font-bold mb-6 text-white">媒体预览示例</h2>
      
      {/* 媒体网格 */}
      <div className="grid grid-cols-3 gap-4">
        {sampleMedia.map((media, index) => (
          <div
            key={index}
            className="relative cursor-pointer rounded-lg overflow-hidden hover:scale-105 transition-transform duration-200"
            onClick={() => handleMediaClick(media)}
          >
            {media.type === 'video' ? (
              <video
                src={media.url}
                className="w-full h-48 object-cover"
              />
            ) : (
              <img
                src={media.url}
                alt={`示例${media.type} ${index + 1}`}
                className="w-full h-48 object-cover"
              />
            )}
            <div className="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-30 transition-opacity duration-200 flex items-center justify-center">
              <i className={`fas ${media.type === 'video' ? 'fa-play' : 'fa-search-plus'} text-white opacity-0 hover:opacity-100 transition-opacity duration-200 text-xl`} />
            </div>
            {/* 媒体类型标识 */}
            <div className="absolute top-2 left-2 bg-black bg-opacity-60 text-white text-xs px-2 py-1 rounded">
              {media.type === 'video' ? '视频' : '图片'}
            </div>
          </div>
        ))}
      </div>

      {/* 媒体预览组件 - 立即渲染，预加载媒体内容 */}
      <ImageViewer
        show={showImageViewer}
        mediaUrl={currentMedia.url}
        mediaType={currentMedia.type}
        mediaAlt={`${currentMedia.type}预览`}
        onClose={handleCloseViewer}
      />
    </div>
  );
};

export default ImageViewerExample; 